<template>
  <div class="page">
    <search @search="search" ></search>
      <div class="content">
        <div class="flex">
          <div class="side">
            <ul v-for="(item,index) in lists">
              <li class="side-li" :class="{active:index==isActive}" @click="listClick(index,$event)">{{ item.name }}</li>
            </ul>
          </div>
          <div class="main">
             <div>{{activeName}}</div>
            <div class="main-flex">
              <ul>
                <li class="good" @click="listClick(item.id)" v-for="item in imgList">
                    <div class="good-img">
                      <img :src="item.img" alt="" mode="widthFix">
                    </div>
                  <text>{{item.name}}</text>
                </li>
              </ul>
            </div>

          </div>
      </div>
    </div>
  </div>
</template>
<script>
  import search from '@/components/search'
  export default {
    data () {
      return {
        parentMsg: 'Message from parent',
        data: '',
        isActive: 0,
        activeName: '热门搜索',
        lists: [
          {
            name: '热搜推荐',
            id: 1
          },
          {
            name: '手机数码',
            id: 2
          },
          {
            name: '女装内衣',
            id: 3
          },
          {
            name: '男装内衣',
            id: 4
          },
          {
            name: '手机数码',
            id: 5
          },
          {
            name: '女装内衣',
            id: 6
          },
          {
            name: '男装内衣',
            id: 7
          },
          {
            name: '女装内衣',
            id: 3
          },
          {
            name: '男装内衣',
            id: 4
          },
          {
            name: '手机数码',
            id: 5
          },
          {
            name: '女装内衣',
            id: 6
          },
          {
            name: '男装内衣',
            id: 7
          }
        ],
        imgList: [
          {
            name: '手机',
            img: require('./goods1.png'),
            id: 1
          },
          {
            name: '平板电脑',
            img: require('./goods2.png'),
            id: 2
          },
          {
            name: '热水器',
            img: require('./goods3.png'),
            id: 3
          },
          {
            name: '女装',
            img: require('./goods4.png'),
            id: 4
          },
          {
            name: '男装',
            img: require('./goods5.png'),
            id: 5
          },
          {
            name: '电视',
            img: require('./goods6.png'),
            id: 6
          },
          {
            name: '手机',
            img: require('./goods1.png'),
            id: 1
          },
          {
            name: '平板电脑',
            img: require('./goods2.png'),
            id: 2
          },
          {
            name: '热水器',
            img: require('./goods3.png'),
            id: 3
          },
          {
            name: '女装',
            img: require('./goods4.png'),
            id: 4
          },
          {
            name: '男装',
            img: require('./goods5.png'),
            id: 5
          },
          {
            name: '电视',
            img: require('./goods6.png'),
            id: 6
          },
          {
            name: '手机',
            img: require('./goods1.png'),
            id: 1
          },
          {
            name: '平板电脑',
            img: require('./goods2.png'),
            id: 2
          },
          {
            name: '热水器',
            img: require('./goods3.png'),
            id: 3
          },
          {
            name: '女装',
            img: require('./goods4.png'),
            id: 4
          },
          {
            name: '男装',
            img: require('./goods5.png'),
            id: 5
          },
          {
            name: '电视',
            img: require('./goods6.png'),
            id: 6
          }
        ]
      }
    },
    components: {
      search
    },
    methods: {
      search (data) {
        this.data = data
        console.log('data:' + this.data)
      },
      listClick (index, $event) {
        this.isActive = index
        console.log(index, $event)
      }
    }
  }
</script>
<style lang="less" rel="stylesheet/less"  scoped>
  @height:calc(100vh - 96rpx);

  .page{
    height: 100vh;
    font-size: 32rpx;
  }
  .content{
    height:@height;
    .flex{
      display: flex;
      height: @height;
      .side{
        width: 150rpx;
        height: @height;
        background: #F8F8F8;
        overflow-y:scroll;
        .side-li{
          width: 150rpx;
          font-size: 24rpx;
          line-height: 96rpx;
          text-align: center;
        }
        .side-li.active{
          font-size: 28rpx;
          color:#E93B3D;
          background: #fff;
        }
      }

      .main{
        width:540rpx;
        height: calc(100vh - 156rpx);
        padding: 30rpx;
        .main-flex{
          width: 540rpx;
          height: calc(100vh - 246rpx);
          overflow-y:scroll;
          ul{
            display: flex;
            width: 540rpx;
            flex-direction: row;
            flex-wrap: wrap;
          }
            li{
            width: 180rpx;
            }
              .good{
                font-size: 28rpx;
                line-height: 40rpx;
                text-align: center;
              }
                .good-img{
                  display:flex;
                  flex-direction: column;
                  width:180rpx;
                  height: 140rpx;
                  align-items:center;
                  justify-content:center;
                }
                  img{
                    width:80rpx;
                  }
        }

      }
    }

  }


</style>
